<template>
  <div>
    <van-nav-bar fixed title="购物车" style="background-color: #e74c3c" />
    <van-cell-group style="margin-top: 46px; margin-bottom: 50px">
      <van-cell v-for="item in list" :key="item.id">
        <div class="cell-box">
          <template>
            <div class="info-box">
              <van-checkbox v-model="item.goods_state">
                <van-image
                  width="7rem"
                  height="7rem"
                  fit="cover"
                  radius="10"
                  :src="item.goods_img"
                />
              </van-checkbox>
              <div class="content-box">
                <h4>
                  {{ item.goods_name }}
                </h4>
                <div class="price-box">
                  <span style="color: red">￥ {{ item.goods_price }}</span>
                  <van-stepper
                    v-model="item.goods_count"
                    style="float: right"
                    theme="round"
                    min="0"
                  />
                </div>
              </div>
            </div>
          </template>
        </div>
      </van-cell>
    </van-cell-group>
    <van-submit-bar
      :price="totalPrice"
      :button-text="'结算 ' + totalCount + '件'"
    >
      <van-checkbox v-model="isChooseAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import axios from "axios";
axios.defaults.baseURL = "https://www.escook.cn/api/";
export default {
  data() {
    return {
      list: [],
      isChooseAll: false,
    };
  },
  methods: {
    select() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].goods_state) {
          this.isChooseAll = false;
          return;
        }
      }
    },
  },
  created() {
    axios({
      url: "cart",
    }).then((res) => {
      this.list = res.data.list;
    });
    this.select;
  },
  watch: {
    isChooseAll(newvule) {
      for (let j = 0; j < this.list.length; j++) {
        this.list[j].goods_state = newvule;
      }
    },
  },
  computed: {
    totalPrice() {
      let sum = 0;
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].goods_state) {
          sum += this.list[i].goods_price * this.list[i].goods_count;
        }
      }
      return sum * 100;
    },
    totalCount() {
      let count = 0;
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].goods_state) {
          count += this.list[i].goods_count;
        }
      }
      return count;
    },
    chooseAll() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i]) {
          for (let j = 0; j < this.list.length; j++) {
            this.list[j].goods_state = 0;
          }
          return 0;
        } else {
          for (let j = 0; j < this.list.length; j++) {
            this.list[j].goods_state = 1;
          }
          return 1;
        }
      }
    },
  },
};
</script>

<style>
.cell-box {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.info-box {
  display: flex;
}
.content-box {
  flex: 1;
  margin-left: 10px;
}
</style>